<template>
  <div>
    <a-card>
      <a-row>
        <a-col :span="6">
          <a-form-model-item label="所在地区" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-cascader
              :options="options"
              :load-data="loadData"
              change-on-select
              placeholder=""
              @change="onChange"
              v-model="area"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="4">
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-button type="primary" @click="handleSearch">查询</a-button>
          </a-form-model-item>
        </a-col>
        <a-col :span="2" style="float:right">
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-button type="primary" @click="handleAddOrg">新增</a-button>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-table
        :pagination="ipagination"
        :loading="loading"
        rowKey="data_id"
        :columns="orgColumns"
        :data-source="orgList"
        @change="handleTableChange"
      >
        <a slot="action" slot-scope="text, record">
          <a-button style="margin-right:15px" @click="handleEditOrg(record)">编辑</a-button>
          <a-button @click="handleDeleteOrg(record.dataId)">删除</a-button>
        </a>
      </a-table>
      <org-modal ref="orgModal" @ok="orgModalOk"></org-modal>
    </a-card>
  </div>
</template>

<script>
import { postAction, getAction, deleteAction } from '@/api/manage'
import OrgModal from './drawer/OrgModal'

const orgColumns = [
  {
    title: '编号',
    dataIndex: 'index'
  },
  {
    title: '所在地区',
    dataIndex: 'organizationAddress'
  },
  {
    title: '机构名称',
    dataIndex: 'organizationName'
  },
  {
    title: '等级',
    dataIndex: 'organizationLevelText'
  },
  {
    title: '操作',
    key: 'operation',
    width: 250,
    fixed: 'right',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  components: { OrgModal },
  data() {
    return {
      options: [],
      loading: false,
      area: [],
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      orgParams: {
        pageSize: 10,
        pageNum: 1
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      orgColumns,
      orgList: []
    }
  },
  created() {
    this.getProvince()
    this.getOrganization()
  },
  methods: {
    getProvince() {
      getAction('/dict/district/province')
        .then(res => {
          if (res.success) {
            this.options = res.result.map(v => {
              return {
                value: v.districtId,
                label: v.name,
                level: 1,
                isLeaf: false
              }
            })
          }
        })
        .finally(_ => {
          this.provinceLoading = false
        })
    },
    async getAreaData(id) {
      let result
      await getAction('dict/district/city', { provinceId: id }).then(res => {
        if (res.success) {
          result = res.result
        } else {
          console.log(res.message)
        }
      })
      return result
    },
    async loadData(selectedOptions) {
      const targetOption = selectedOptions[selectedOptions.length - 1]
      const area = []
      const address = await this.getAreaData(selectedOptions[selectedOptions.length - 1].value)
      await Promise.all(
        address.map(v => {
          area.push({
            value: v.districtId,
            label: v.name,
            isLeaf: targetOption.level == 2 ? true : false
          })
        })
      )
      targetOption.children = area.map(v => {
        return {
          ...v,
          level: targetOption.level == 1 ? 2 : 3
        }
      })
      this.options = [...this.options]
    },
    getOrganization() {
      postAction('org/page', this.orgParams).then(res => {
        if (res.success) {
          this.orgList = res.result.records.map((v, i) => {
            return {
              ...v,
              index: i + 1
            }
          })
        } else {
          console.log(res.message)
        }
      })
    },
    onChange(v) {
      console.log(v)
    },
    orgModalOk() {
      this.getOrganization()
    },
    handleSearch() {
      this.orgParams.district = this.area.join(',')
      this.getOrganization()
    },
    handleAddOrg() {
      this.$refs.orgModal.add()
      this.$refs.orgModal.title = '新增机构'
    },
    handleEditOrg(record) {
      this.$refs.orgModal.edit(record)
      this.$refs.orgModal.title = '编辑机构'
    },
    handleDeleteOrg(id) {
      deleteAction('org/remove', { id }).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.getOrganization()
        } else {
          console.log(res.message)
        }
      })
    },
    handleTableChange(pagination) {
      this.ipagination = pagination
      this.orgParams.pageNum = pagination.current
      this.orgParams.pageSize = pagination.pageSize
      this.getOrganization()
    }
  }
}
</script>

<style></style>

